<template>
  <!-- 添加或修改读卡器对话框 -->
  <el-dialog :title="title" v-model="open" width="740px" append-to-body>
    <el-form ref="cardReaderRef" :model="form" :rules="rules" label-width="100px" class="m-form-inline" inline>
      <el-form-item label="设备品牌" prop="deviceBrand">
        <el-input v-model="form.deviceBrand" placeholder="请输入设备品牌"/>
      </el-form-item>
      <el-form-item label="设备型号" prop="deviceModel">
        <el-input v-model="form.deviceModel" placeholder="请输入设备型号"/>
      </el-form-item>
      <el-form-item label="设备名称" prop="deviceName">
        <el-input v-model="form.deviceName" placeholder="请输入设备名称"/>
      </el-form-item>
      <el-form-item label="设备序列号" prop="serialNumber">
        <el-input v-model="form.serialNumber" placeholder="请输入设备序列号"/>
      </el-form-item>

      <el-form-item label="城市" prop="cityName">
        <el-input v-model="cityInfo.name" placeholder="城市" disabled/>
      </el-form-item>
      <el-form-item label="辖区" prop="areaCode">
        <el-select v-model="form.areaCode" @change="changeArea">
          <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id+''"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="街道" prop="streetCode">
        <el-select v-model="form.streetCode" @change="changeStreet">
          <el-option v-for="item in streetList" :key="item.id" :label="item.name" :value="item.id+''"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="社区" prop="community">
        <el-input v-model="form.community" placeholder="请输入社区"/>
      </el-form-item>
      <el-form-item label="小区名称" prop="residentialName">
        <el-input v-model="form.residentialName" placeholder="请输入小区名称"/>
      </el-form-item>

<!--      <el-form-item label="地址" prop="address">-->
<!--        <el-input v-model="form.address" placeholder="请输入地址"/>-->
<!--      </el-form-item>-->
      <el-form-item label="物理地址" prop="macAddress">
        <el-input v-model="form.macAddress" placeholder="请输入物理地址"/>
      </el-form-item>
<!--      <el-form-item label="投放点" prop="placement">-->
<!--        <el-input v-model="form.placement" placeholder="请输入投放点"/>-->
<!--      </el-form-item>-->
      <el-form-item label="登记时间" prop="registerTime">
        <el-date-picker clearable
                        v-model="form.registerTime"
                        type="datetime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="请选择登记时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="接入时间" prop="accessTime">
        <el-date-picker clearable
                        v-model="form.accessTime"
                        type="datetime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="请选择接入时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="备注信息" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注信息"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup name="Surveillance">
import {getCardReader, addCardReader, updateCardReader} from "@/api/wvp/cardReader";
import {getAddressUnit, listChild} from "@/api/wvp/addressUnit";

const {proxy} = getCurrentInstance();
const emit = defineEmits(['close'])
const form = ref({})
const open = ref(false);
const title = ref("");
const rules = ref({
  deviceName: [
    {required: true, message: "设备名称不能为空", trigger: "blur"}
  ],
  deviceBrand: [
    {required: true, message: "设备品牌不能为空", trigger: "blur"}
  ],
  deviceModel: [
    {required: true, message: "设备型号不能为空", trigger: "blur"}
  ],
  serialNumber: [
    {required: true, message: "设备序列号不能为空", trigger: "blur"}
  ],
  areaCode: [
    {required: true, message: "辖区不能为空", trigger: "blur"}
  ],
  streetCode: [
    {required: true, message: "街道不能为空", trigger: "blur"}
  ],
  community: [
    {required: true, message: "社区不能为空", trigger: "blur"}
  ],
});

// 表单重置
function reset() {
  form.value = {
    id: null,
    deviceBrand: null,
    deviceModel: null,
    deviceStatus: null,
    deviceName: null,
    serialNumber: null,
    proviceName: null,
    proviceCode: null,
    cityName: null,
    cityCode: null,
    areaName: null,
    areaCode: null,
    address: null,
    community: null,
    residentialName: null,
    ip: null,
    macAddress: null,
    placement: null,
    registerTime: null,
    accessStatus: null,
    accessTime: null,
    createTime: null,
    createBy: null,
    updateTime: null,
    updateBy: null,
    deleted: null,
    remark: null,
    streetName: null,
    streetCode: null
  };
  proxy.resetForm("cardReaderRef");
}

function cancel() {
  open.value = false;
  reset();
}

const areaList = ref([]);
const streetList = ref([]);
const cityInfo = ref({id: "", name: ""});

function getCity() {
  getAddressUnit(1).then(res => {
    cityInfo.value = res.data;
  })
}

function getArea() {
  listChild(1).then(res => {
    areaList.value = res.data
  })
}

function listStreet(areaCode) {
  listChild(areaCode).then(res => {
    streetList.value = res.data
  })
}

function changeArea(areaCode) {
  form.value.streetCode = "";
  form.value.streetName = "";
  areaList.value.forEach(item => {
    if (item.id + '' === form.value.areaCode) {
      form.value.areaName = item.name
    }
  })
  listStreet(areaCode)
}

function changeStreet() {
  streetList.value.forEach(item => {
    if (item.id + '' === form.value.streetCode) {
      form.value.streetName = item.name
    }
  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["cardReaderRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateCardReader(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          emit("close", false)
        });
      } else {
        addCardReader(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          emit("close", false)
        });
      }
    }
  });
}


function begin(id) {
  if (!id) {
    reset();
    open.value = true
    title.value = "添加读卡器";
    return;
  }
  getCardReader(id).then(response => {
    form.value = response.data;
    if (form.value.areaCode) {
      listStreet(form.value.areaCode)
    }
    open.value = true;
    title.value = "修改读卡器";
  });
}

//获取区域
getArea();
//获取城市
getCity();
defineExpose({
  begin
})
</script>
<style scoped>
.m-form-inline .el-input {
  width: 220px;
}

.m-form-inline .el-select {
  width: 220px;
}

.m-form-inline .el-date-picker {
  width: 220px;
}
</style>
